<%@ page import="org.bson.Document" %>
<%@ page import="com.mongodb.client.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Mongo-Web学生管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <style>
        .myfom {
            margin-left: 15px;
            margin-right: 15px;
        }

        .top {
            position: relative;
            top: 0;
            background-color: #2aabd2;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<%
    String url = "mongodb://g08:abc%408@mongo.zhledu.cn:27017/g08";
    MongoClient client = MongoClients.create(url);
    MongoIterable<String> names = client.listDatabaseNames();
    MongoDatabase g08 = client.getDatabase("g08");
    MongoCollection<Document> collection = g08.getCollection("student");
    final FindIterable<Document> list = collection.find().limit(100);
%>
<div class="container-fluid">
    <div class="row top">
        <div class="col-md-4 col-md-offset-4">
            <h1>欢迎使用学生信息管理系统</h1>
        </div>
    </div>
    <div class="row">
        <form class="form-inline">
            <div class="form-group myfom">
                <label for="sno">学号</label>
                <input class="form-control" id="sno" name="sno">
            </div>
            <div class="form-group myfom">
                <label for="name">姓名</label>
                <input class="form-control" id="name" name="name">
            </div>
            <div class="form-group myfom">
                <label for="idCard">身份证号</label>
                <input class="form-control" id="idCard" name="idCard">
            </div>
            <div class="form-group myfom">
                <label for="sex">性别</label>
                <select class="form-control" id="sex" name="sex">
                    <option value="">全部</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group myfom">
                <label for="major">性别</label>
                <select class="form-control" id="major" name="major">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="btn-group">
                <button type="submit" class="btn btn-primary  myfom"><span class="glyphicon glyphicon-search"></span>查找
                </button>
                <button type="reset" class="btn btn-warning myfom"><span class="glyphicon glyphicon-refresh"></span>重置
                </button>
            </div>
        </form>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="col-md-24" style="margin-left: 15px">
            <div class="btn-group">
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal"><span
                        class="glyphicon glyphicon-plus"></span>添加
                </button>
                <button id="del" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除
                </button>
                <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-export"></span>导出
                </button>
                <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-import"></span>导入</button>
                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-print"></span>打印</button>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 10px">
        <div class="col-md-24">
            <table class="table table-striped table-hover table-bordered">
                <thead style="background-color: #2aabd2">
                <th>
                    <input type="checkbox" id="checkAll">全选
                </th>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身份证号</th>
                <th>手机</th>
                <th>操作</th>
                </thead>
                <%
                    for (Document student : list) {
                        int id = student.getInteger("_id");
                %>
                <tr>
                    <td>
                        <input type="checkbox" id="<%=id%>" value="<%=id%>">
                    </td>
                    <td><%=student.getString("sno")%>
                    </td>
                    <td><%=student.getString("name")%>
                    </td>
                    <td><%=student.getInteger("age")%>
                    </td>
                    <td><%=student.getString("sex")%>
                    </td>
                    <td><%=student.getString("idCard")%>
                    </td>
                    <td><%=student.getString("phone")%>
                    </td>
                    <td>
                        <a href="#">查看</a> | <a href="#">修改</a> | <a href="#">删除</a> | <a href="#">打印</a>

                    </td>
                </tr>

                <%
                    }
                %>
            </table>
        </div>
    </div>
</div>


<!-- 添加学生 -->
<div class="modal fade bs-example-modal-lg" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addStuForm">
                    <div class="form-group">
                        <label for="modal-sno" class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-9">
                            <input class="form-control " id="modal-sno">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-name" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="modal-name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-idCard" class="col-sm-2 control-label">身份证号</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="modal-idCard">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-sex" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="modal-sex">
                                <option value="">全部</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="modal-major" class="col-sm-2 control-label">专业</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="modal-major">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="saveStu" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.js"></script>
<script>
    $(function () {

    })
</script>
</body>
</html>